<template>
  <div class="wrap">
    <div class="header">
      <select-platform v-model="queryParams.platformType" @change="changePlatform" v-if="$store.getters.platformNum > 1" :disdisabled="loading"></select-platform>
      <div class="search-item" v-if="$store.getters.roleType!='commissioner'">
        <el-radio-group v-if="userOptions.length > 1" v-model="queryParams.tabAccountType" size="small" @change="changeOption();changeOption2()" :disabled="loading">
          <el-radio-button class="mgb10" :label="1">
            按店铺筛选
          </el-radio-button>
          <el-radio-button class="mgb10" :label="2">
            按运营筛选
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="search-item" v-if="accountOptions.length > 1&&queryParams.tabAccountType==1">
        <div class="search-box" >
          <div
            ref="accountIdsCheckBox"
            class="left"
            :class="{
              'hidden-account-options': !isAccountExpend && false
            }"
            @resize="onContainerResize"
          >
            <el-checkbox
              style="display: inline-block;margin-right: 30px"
              class="mgb10"
              :indeterminate="isIndeterminateAccount"
              v-model="checkAllAccount"
              @change="handleCheckAllAccount"
              :disabled="loading"
            >
              {{ $t('common.allStores') }} ({{attrNumber(allAccountOrderNum)}})
            </el-checkbox>
            <el-checkbox
              class="mgb10"
              v-for="item in accountOptions"
              :label="item.label"
              :key="item.label"
              :value="queryParams.accountIds.indexOf(item.label) !== -1"
              @change="checkAccount(item,$event);changeOption();changeOption2();"
              :disabled="loading"
            >
              {{item.text}} ({{attrNumber(item.orderNum)}})
            </el-checkbox>
          </div>
          <div class="right" v-show="accountLine > 1" v-if="false">
            <el-tag style="cursor: pointer" @click="isAccountExpend = !isAccountExpend">{{isAccountExpend ? '收起' : '展示'}}</el-tag>
          </div>
        </div>

        <div style="height: 1px;width: 100%;background-color: #F2F2F2"></div>
      </div>
     <div class="search-item" v-if="userOptions.length > 1&&queryParams.tabAccountType==2">
       <div class="search-box" >
         <div
           class="left"
         >
           <el-checkbox
             style="display: inline-block;margin-right: 30px"
             class="mgb10"
             v-model="checkAllUser"
             @change="handleCheckAllUser"
             :disabled="loading"
           >
             全部运营
           </el-checkbox>
           <el-checkbox
             class="mgb10"
             v-for="item in userOptions"
             :label="item.label"
             :key="item.label"
             :value="queryParams.userIds.indexOf(item.label) !== -1"
             @change="checkUser(item,$event);changeOption();changeOption2();"
             :disabled="loading"
           >
             {{item.text}}({{item.orderNum}})
           </el-checkbox>
         </div>
       </div>
           <div style="height: 1px;width: 100%;background-color: #F2F2F2"></div>
     </div>
      <div class="search-item">
        <diy-date :set-day-type="30" v-model="queryParams.time" @change="changeOption();changeOption2();" :disdisabled="loading"></diy-date>
      </div>



      <div class="search-item">
        <el-radio-group v-model="queryParams.tabType" size="small" @change="changeOption();changeOption2()" :disabled="loading">
          <el-radio-button class="mgb10" :label="2">{{$t('order.shipped')}}({{attrNumber(orderNum.sendNum)}})</el-radio-button>
          <el-radio-button class="mgb10" :label="6">{{$t('order.waitPicked')}}({{attrNumber(orderNum.waitPickNum)}})</el-radio-button>
          <el-radio-button class="mgb10" :label="7">{{ $t('order.collectedItems') }}({{attrNumber(orderNum.pickedNum)}})</el-radio-button>
          <el-radio-button class="mgb10" :label="8">{{ $t('order.inTransit') }}({{attrNumber(orderNum.inTransitNum)}})</el-radio-button>
          <el-radio-button class="mgb10" :label="3">{{$t('order.completed')}}({{attrNumber(orderNum.finishNum)}})</el-radio-button>
          <el-radio-button class="mgb10" :label="4">
            {{$t('order.canceled')}}({{attrNumber(orderNum.cancelNum)}})
          </el-radio-button>
          <el-radio-button class="mgb10" :label="5">
            {{$t('order.returned')}}({{attrNumber(orderNum.returnNum)}})
          </el-radio-button>
          <el-radio-button class="mgb10" :label="10">
            {{$t('order.rejected')}}({{attrNumber(orderNum.rejectedNum)}})
          </el-radio-button>
          <el-radio-button class="mgb10" :label="11">
            {{$t('order.lose')}}({{attrNumber(orderNum.loseNum)}})
          </el-radio-button>
          <el-radio-button class="mgb10" :label="9">{{ $t('特殊') }}({{attrNumber(orderNum.specialNum)}})</el-radio-button>
          <el-radio-button class="mgb10" :label="0">{{$t('order.allStickers')}}({{attrNumber(orderNum.totalNum)}})</el-radio-button>
        </el-radio-group>
      </div>
      <div class="search-item">
        <div class="search-box">
          <div class="left">
            <el-select
              v-model="queryParams.goodsType"
              size="small"
              class="mgr10 mgb10"
              @change="changeOption"
              style="width: 150px"
              clearable
            >
              <el-option :label="$t('order.allListing')" value=""></el-option>
              <el-option :label="$t('order.multipleListing')" :value="1"></el-option>
              <el-option :label="$t('order.singleListing')" :value="2"></el-option>
            </el-select>

            <el-select
              v-model="queryParams.skuType"
              size="small"
              class="mgr10 mgb10"
              @change="changeOption"
              style="width: 150px"
              clearable
            >
              <el-option :label="$t('order.allVariants')" value=""></el-option>
              <el-option :label="$t('order.multipleSKU')" :value="1"></el-option>
              <el-option :label="$t('order.singleSKU')" :value="2"></el-option>
            </el-select>

            <el-select
              v-model="queryParams.serveType"
              size="small"
              class="mgr10 mgb10"
              @change="changeOption"
              style="width: 150px"
              clearable>
              <el-option :label="$t('order.allPackagingServices')" value=""></el-option>
              <el-option :label="$t('order.packaged')" :value="1"></el-option>
              <el-option :label="$t('order.unpackaged')" :value="2"></el-option>
            </el-select>

            <el-select
              v-model="queryParams.logistics_type_info"
              size="small"
              class="mgr10 mgb10"
              @change="changeOption();changeOption2();"
              style="width: 150px"
              clearable>
              <el-option label="面单类型" value=""></el-option>
              <el-option label="平台面单" :value="1"></el-option>
              <el-option label="物流面单" :value="2"></el-option>
            </el-select>
          </div>
          <div class="right">
            <div style="display: inline-block;margin-right: 20px;width: 540px">
              <el-input
                size="small"
                style="width: 280px; margin-right: 10px; margin-bottom: 10px"
                v-model="queryParams.keyword"
                :placeholder="$t('order.searchForOrderID/Listing ID/SKU')"
                @keyup.enter.native="changeOption(true)"
                clearable @clear="changeOption(false, 'clear')"></el-input>
              <el-button size="small" type="primary" @click="changeOption(true);changeOption2()">{{ $t('common.search') }}</el-button>
              <export-button :func="func" :query-params="queryParams" :exportType="'user_sticker_list'" :getTotal="total"></export-button>
            </div>
          </div>
        </div>
      </div>


    </div>
    <div class="content">

      <el-table
        v-loading="loading"
        :data="data"
        border
        :default-sort="defaultSort"
        @sort-change="handleSortChange"
        v-tableHeightV2="{ bottomOffset: -60, additionalSelectors: ['.header', '.table-tips', '.page-wrap'] }"
        height="100px"
        ref="tableData"
      >
        <el-table-column
          prop="orderId"
          :label="$t('table.orderId')"
          align="center"
          min-width="150"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="showName"
          :label="$t('table.store')"
          align="center"
          min-width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="goodsImage"
          :label="$t('table.productCover')"
          align="center"
          width="120"
        >
          <template slot-scope="{row}">
            <template v-if="row.subOrders.length === 1">
              <div class="img-box img-one">
                <img :src="row.subOrders[0].goodsImage" alt=""/>
              </div>
            </template>
            <template v-else>
              <div class="img-box">

                <img
                  v-for="subOrder in row.subOrders.slice(0,4)"
                  :key="subOrder.subOrderId"
                  :src="subOrder.goodsImage"
                  alt=""
                />
              </div>
            </template>
          </template>

        </el-table-column>
        <el-table-column
          prop="num"
          :label="$t('table.productQuantity')"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="amount"
          :label="$t('table.amount')"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="stickerPrice"
          :label="$t('table.stickingAmount')"
          align="center"
          min-width="110"
        >
          <template slot-scope="{row}">
            {{row.settleOrder.spStickerPrice}}
          </template>
        </el-table-column>
        <el-table-column
          prop="stickerPrice"
          :label="$t('table.Total sticker fee')"
          align="center"
          min-width="150"
        >
          <template slot-scope="{row}">
            {{row.settleOrder.stickerPrice}}
          </template>
        </el-table-column>
        <el-table-column
          prop="spStickerPrice"
          :label="$t('table.Unit price of sticker')"
          align="center"
          min-width="110"
        >
          <template slot-scope="{row}">
            {{row.settleOrder.spStickerPrice}}
          </template>
        </el-table-column>
        <el-table-column
          prop="stickerAppend"
          :label="$t('table.Continuation cost')"
          align="center"
          min-width="110"
        >
          <template slot-scope="{row}">
            {{row.settleOrder.stickerAppend}}
          </template>
        </el-table-column>
        <el-table-column
          prop="logisticTypePrice"
          :label="$t('table.Special courier fees')"
          align="center"
          min-width="150"
        >
          <template slot-scope="{row}">
            {{row.settleOrder.logisticTypePrice}}
          </template>
        </el-table-column>
        <el-table-column
          prop="packagePrice"
          :label="$t('table.Packaging service fees')"
          align="center"
          min-width="150"
        >
          <template slot-scope="{row}">
            {{row.settleOrder.packagePrice}}
          </template>
        </el-table-column>
        <el-table-column
          prop="warehouseTypeStr"
          :label="$t('table.warehouse')"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="logisticsArr"
          :label="$t('table.logistics')"
          align="center"
          width="200"
        >
          <template slot-scope="{row}">
            <div
              v-for="(logistics, index) in row.logisticsArr"
              :key="index"
            >
              <!--<template v-if="(logistics.logistics_type === 'FedEx' || logistics.logistics_type === 'iMile') && logistics.is_manual_operation !== 1">-->
              <template v-if="logistics.logistics_type === 'FedEx' || logistics.logistics_type === 'iMile'">
                <el-button type="text" style="color: #606266;" @click="toggleDetails(logistics)">{{logistics.tracking_number_info}}</el-button>
                <i class="el-icon-search mgl10" style="cursor: pointer; color: #1890ff;" @click="toggleDetails(logistics)"></i>
              </template>
              <template v-else>
                {{logistics.tracking_number_info}}
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="listing"
          :label="$t('table.ListingIDAndSKU')"
          align="center"
          min-width="300"
        >
          <template slot-scope="{row}">
            <div
              v-for="subOrder in row.subOrders"
              :key="subOrder.subOrderId"
            >
              <template v-if="queryParams.platformType === 1">
                {{subOrder.goodsId}}
              </template>
              <template v-if="queryParams.platformType === 4">
                {{subOrder.spuName}}
              </template>
              <template v-if="queryParams.platformType === 8">
                {{subOrder.skuID}}
              </template>

              <template v-if="subOrder.sku">({{subOrder.sku}})</template>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="statusStr"
          :label="$t('table.status')"
          align="center"
          width="100"
        >
        </el-table-column>

        <el-table-column
          prop="createdDate"
          :label="$t('table.createTime')"
          align="center"
          min-width="200"
          sortable="custom"
          :sort-orders="sortOrders"
        >
        </el-table-column>
        <el-table-column
          prop="dateSD"
          :label="$t('table.应送达时间')"
          align="center"
          min-width="200"
        >
          <template #header>
            <span>{{$t('table.应送达时间')}}</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <template #content>{{ $t('平台要求该笔订单包裹最晚送达驿站的时间') }}</template>
              <i class="el-icon-question" style="color:#409eff; margin-left:5px;"></i>
            </el-tooltip>
          </template>
          <template slot-scope="{row}">
            <template v-if="row.shipping && row.shipping.dateSD">
              {{row.shipping.dateSD || '-'}}
            </template>
            <template v-else>
              -
            </template>
          </template>
        </el-table-column>

        <el-table-column
          prop="dateDroppedOff"
          :label="$t('table.揽件时间')"
          align="center"
          min-width="200"
          sortable="custom"
          :sort-orders="sortOrders"
        >
          <template slot-scope="{row}">
            <template v-if="row.shipping">
                <span :class="{'font-red': row.shipping && row.shipping.isOverDeadline}">
                  {{row.shipping.dateDroppedOff || '-'}}
                </span>
            </template>
            <template v-else>
              -
            </template>
          </template>
        </el-table-column>

        <template v-if="queryParams.platformType === 1">
          <el-table-column
            prop="mixTime"
            :label="$t('table.Completion/Cancellation/Return Time')"
            align="center"
            min-width="200"
          >
            <template slot-scope="{row}">
              <template v-if="row.orderStatus === 3">
                {{row.finishDate || '-'}}
              </template>
              <template v-else-if="row.orderStatus === 4">
                {{row.cancelDate || '-'}}
              </template>
              <template v-else-if="row.orderStatus === 5">
                {{row.returnClosedTime || '-'}}
              </template>
              <template v-else>
                -
              </template>
            </template>
          </el-table-column>
        </template>

        <template v-if="queryParams.platformType === 4">
          <el-table-column
            prop="mixTime"
            :label="$t('table.Completion/Rejection/Lose Time')"
            align="center"
            min-width="200"
          >
            <template slot-scope="{row}">
              <template v-if="row.orderStatus === 3">
                {{row.finishDate || '-'}}
              </template>
              <template v-else-if="row.orderStatus === 4">
                {{row.dateReturnOff || '-'}}
              </template>
              <template v-else-if="row.orderStatus === 5">
                {{row.dateReturnOff || '-'}}
              </template>
              <template v-else-if="row.orderStatus === 9">
                {{row.dateRejectionOff || '-'}}
              </template>
              <template v-else-if="row.orderStatus === 10">
                {{row.dateLoseOff || '-'}}
              </template>
              <template v-else>
                -
              </template>
            </template>
          </el-table-column>
        </template>



      </el-table>


      <div class="page-wrap">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          @current-change="getData"
          :page-sizes="[10, 20, 50, 100, 500, 1000]"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      :title="(showTraceTrackingNumberInfo === null) ? `物流轨迹 ` : `物流轨迹 ` + showTraceTrackingNumberInfo"
      :visible.sync="showTraceDialog"
      width="500px"
    >
      <template v-if="showTraceData !== null">
        <div
          v-for="(traceItem, traceIndex) in showTraceData"
          :key="traceIndex"
          :style="{ color: traceIndex === 0 ? 'initial' : '#AAAAAA' }"
        >
          <template v-if="showTraceLogisticsType === 'FedEx'">
            <span>{{ traceItem.date }}</span>
            <br>
            <span v-if="traceItem.scanLocation['city'] !== null && traceItem.scanLocation['city'] !== false && traceItem.scanLocation['city'] !== undefined">【{{ traceItem.scanLocation['city'] }}】</span> <span>{{ traceItem.eventDescription }}</span>
            <br>
            <br>
          </template>
          <template v-else>
            <span>{{ traceItem.latestStatusTime }}</span>
            <br>
            <span>{{ traceItem.locusDetailed }}</span>
            <br>
            <br>
          </template>
        </div>
      </template>
      <template v-else>
        <div v-loading="showTraceLoading"></div>
      </template>
    </el-dialog>



  </div>
</template>

<script>
import {attrNumber, getCountryIcon} from "@/utils/common";
import {
  getAliexpressOrderList,
  getFaOrderList,
  getLogisticOrderTrace,
  getOrderAccountList,
  getOrderList,
  getOrderListNum,
  getSiOrderList,
  getSpOrderList,
  getTikTokOrderList,
} from "@/api/order";

import {deepCopy} from "@/utils";
import OrderGoodsNum from "@/views/order/components/OrderGoodsNum.vue";
import DiyDate from "@/views/order/components/DiyDate.vue";
import ExportButton from "@/views/order/components/ExportButton.vue";
import SelectPlatform from "@/components/SelectPlatform";
import {getUpToDateLog} from "@/api/helpDocument";
import {editUserLogShow, getInfo, getIsShowLog} from "@/api/user";
import {mapGetters} from "vuex";

export default {
  name: "stickerList",
  components: {
    SelectPlatform,
    ExportButton,
    DiyDate,
  },
  data(){
    return {
      loading: false,
      orderGoodsItemLoading: false,
      queryParams: {
        tabAccountType:1,
        page: 1,
        pageSize: 20,
        tabType : 2, // 状态
        goodsType : '', //  商品类型
        skuType: '', // 库存类型
        keyword: '',
        accountIds: [], // 店铺选择
        userIds: [], // 用户选择
        time: [],
        stickerStatus: 1,
        platformType: this.$store.getters.defaultAccountTypeNum,
        serveType: '',
        exportType: 'user_sticker_list',
        logistics_type_info: '',
      },
      data:[],
      total: 0,
      // 订单数量
      orderNum:{
        cancelNum: 0,
        inTransitNum: 0,
        finishNum: 0,
        ignoreNum: 0,
        returnNum: 0,
        rejectedNum: 0,
        loseNum: 0,
        sendNum: 0,
        totalNum:0,
        untreatedNum:0,
        waitPickNum: 0,
        pickedNum: 0,
        specialNum: 0,
      },
      checkAllFlag: false,
      getOrderList,
      orderGoodsItem:[], //
      checkAllCountry: true,
      attrNumber,
      checkAllAccount: true, // 是否选择了所有店铺
      accountOptions: [], // 店铺的选项
      isAccountExpend: true, // 是否展示所有店铺
      accountLine: 0,
      is_search: false,

      sortOrders: ['descending', 'ascending', null],

      defaultSort:{
        prop: 'createdDate',
        order: 'descending'
      },

      func: getOrderList,

      showTraceDialog: false,
      showTraceLoading: false,
      showTraceAbbreviateData: null,
      showTraceData: null,
      showTraceInfo: false,
      showTraceLogisticsType: null,
      showTraceTrackingNumberInfo: null,
      userOptions:[],
      checkAllUser: true,



    }
  },
  created() {
    // this.setQueryParams()
    this.queryParams.orderBy = this.defaultSort.order
    this.queryParams.orderField = this.defaultSort.prop
    this.getAllData()

  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  computed:{
    tableData(){
      const tableDate = [];
      this.data.forEach(item=>{
        const obj = item;
        tableDate.push(obj)
      })
      return tableDate;
    },
    ...mapGetters( [
      'id'
    ]),
    // 能够选择的站点
    canCheckCountry(){
      return this.countryOptions.filter(item => !item.disable);
    },
    // 判断全部站点的选择框是不是不定式
    isIndeterminate(){
      let flag = true;
      const canCheckCountry = this.canCheckCountry;
      if(canCheckCountry.length === this.queryParams.countries.length){
        flag = false
      }
      if(this.queryParams.countries.length === 0){
        flag = false
      }
      return flag
    },
    // 全部站点未处理的订单数量
    allCountryOrderNum(){
      let num = 0;
      this.countryOptions.forEach(item=>{
        num += item.num;
      })
      return num
    },
    // 店铺全选不定式
    isIndeterminateAccount(){
      let flag = true;
      if(this.queryParams.accountIds.length === 0){
        return false;
      }
      if(this.queryParams.accountIds.length === this.accountOptions.length){
        return false;
      }
      return flag;
    },
    // 全部店铺的订单数
    allAccountOrderNum(){
      let num = 0;
      this.accountOptions.forEach(item=>{
        num += item.orderNum;
      })
      return num;
    },
    // 获取当前页面几行
  },
  mounted() {
    window.addEventListener('resize', this.onWindowResize);


  },
  methods:{

    onWindowResize() {
      if (this.$refs.accountIdsCheckBox) {
        this.$refs.accountIdsCheckBox.dispatchEvent(new Event('resize'));
      }
    },
    async getAllData(){
      // 获取所有店铺
      // this.getAccountOrderNumList();
      this.queryParams.page = 1;
      this.checkAllAccount = true;
      await getOrderAccountList(this.queryParams)
        .then(res=>{
          // 排序
          const data = res.data;

          this.accountOptions = [];
          this.queryParams.accountIds = [];
          data.forEach(item=>{
            const obj = {
              label: item.id,
              text: item.showName,
              orderNum: item.orderNum,
            }
            this.accountOptions.push(obj);
            this.queryParams.accountIds.push(obj.label)
          })


          this.$nextTick(()=>{
            this.onContainerResize()
            this.isAccountExpend = false
          })
          //默认用户全选
          res.info.childUserList.forEach(item=>{
            const obj = {
              label: item.id,
              text: item.name,
              orderNum: item.orderNum,
            }
            this.userOptions.push(obj);
            this.queryParams.userIds.push(obj.label)
          })

        })


      this.getData()
      this.getOrderListNum()
    },
    // 获取表单数据
    getData(){
      this.loading = true
      this.func = null;
      switch (this.queryParams.platformType){
        case 1:
          this.func = getOrderList
          break;
        case 2:
          this.func = getFaOrderList
          break;
        case 3:
          this.func = getSpOrderList;
          break;
        case 4:
          this.func = getSiOrderList;
          break;
        case 6:
          this.func = getTikTokOrderList;
          break;
        case 8:
          this.func = getAliexpressOrderList;
          break;
        default:
          this.loading = false
          return;
      }
      this.func(this.queryParams)
        .then(res=>{
          const info = res.info
          this.data = res.data
          this.total = res.info.total
          this.loading = false;
        })
    },
    // 触发变更事件
    changeOption(is_search = false, type = ''){
      if (is_search == true) {
        //判断是否使用过搜索按钮
        this.is_search = true
      }
      if (type == 'clear') {
        if (this.is_search == false) {
          return
        } else {
          this.is_search = false
        }
      }

      this.queryParams.page = 1
      this.checkAllAccount = this.accountOptions.length === this.queryParams.accountIds.length;
      this.checkAllUser = this.userOptions.length === this.queryParams.userIds.length;
      this.getData()
    },
    handleSizeChange(val){
      this.queryParams.pageSize = val;
      this.queryParams.page = 1
      this.getData();
    },
    //排序
    handleSortChange(column){
      this.queryParams.orderBy = ''
      this.queryParams.orderField = ''
      if(column.order){
        this.queryParams.orderBy = column.order
        this.queryParams.orderField = column.prop
      }
      this.queryParams.page = 1;
      this.getData()
    },
    // 触发某些事件改变数据（改变聚合搜索模块 改变店铺数量）
    changeOption2(){
      this.getOrderListNum()
      this.getAccountOrderNumList()
    },
    // 选择店铺
    checkAccount(account,$event){
      if(this.checkAllAccount === true){
        this.queryParams.accountIds = [account.label];
        this.checkAllAccount = false
      }else{
        const index = this.queryParams.accountIds.indexOf(account.label)
        if(index === -1){
          this.queryParams.accountIds.push(account.label)
        }else{
          this.queryParams.accountIds.splice(index,1)
        }
      }

    },
    // 选择店铺
    checkUser(account,$event){
      if(this.checkAllUser === true){
        this.queryParams.userIds = [account.label];
        this.checkAllUser = false
      }else{
        const index = this.queryParams.userIds.indexOf(account.label)
        if(index === -1){
          this.queryParams.userIds.push(account.label)
        }else{
          this.queryParams.userIds.splice(index,1)
        }
      }

    },
    // 选择所有店铺
    handleCheckAllAccount(){
      this.queryParams.accountIds = []
      if(this.checkAllAccount){
        this.accountOptions.forEach(item=>{
          this.queryParams.accountIds.push(item.label)
        })
      }
      this.changeOption();
      this.changeOption2();
    },
    // 选择所有用户
    handleCheckAllUser(){
      this.queryParams.userIds = []
      if(this.checkAllUser){
        this.userOptions.forEach(item=>{
          this.queryParams.userIds.push(item.label)
        })
      }
      this.changeOption();
      this.changeOption2();
    },
    onContainerResize(){
      return;
      // const select = this.$refs.accountIdsCheckBox;
      // let offsetHeight = select.offsetHeight;
      // this.accountLine = Math.ceil(offsetHeight / 29)
    },
    // 获取订单的数量
    getOrderListNum(){
      getOrderListNum(this.queryParams)
        .then(res =>{
          this.orderNum.cancelNum = res.data.cancelNum;
          this.orderNum.inTransitNum = res.data.inTransitNum;
          this.orderNum.finishNum = res.data.finishNum;
          this.orderNum.ignoreNum = res.data.ignoreNum;
          this.orderNum.returnNum = res.data.returnNum;
          this.orderNum.rejectedNum = res.data.rejectedNum;
          this.orderNum.loseNum = res.data.loseNum;
          this.orderNum.sendNum = res.data.sendNum;
          this.orderNum.totalNum = res.data.totalNum;
          this.orderNum.untreatedNum = res.data.untreatedNum;
          this.orderNum.waitPickNum = res.data.waitPickNum;
          this.orderNum.pickedNum = res.data.pickedNum;
          this.orderNum.specialNum = res.data.specialNum;

        })
    },
    // 获取店铺订单数量
    getAccountOrderNumList(){
      getOrderAccountList(this.queryParams)
        .then(res=>{
          const {data} = res
          this.accountOptions.forEach(item=>{
            item.orderNum = 0
            data.find(_data =>{
              if(_data.accountId === item.label){
                item.orderNum = _data.orderNum
                return true;
              }
            })
          })
        })
    },
    showQueryParams(){
      console.log(this.queryParams)
    },
    changePlatform(){
      this.getAllData()
    },

    toggleDetails(traceData){
      this.showTraceDialog = true
      this.showTraceLoading = true

      this.showTraceAbbreviateData = null
      this.showTraceData = null
      this.showTraceInfo = false
      this.showTraceLogisticsType = null
      this.showTraceTrackingNumberInfo = null

      const postData = {
        'orderId': traceData.orderId,
        'accountType': traceData.accountType,
        'trackingNumber': traceData.tracking_number,
      }

      // 发起查询
      getLogisticOrderTrace(postData)
        .then(res=>{
          this.showTraceLoading = false
          if(res.error === 0){
            this.showTraceAbbreviateData = res.data.traceAbbreviate
            this.showTraceData = res.data.trace
            this.showTraceInfo = false
            this.showTraceLogisticsType = res.data.logistics_type
            this.showTraceTrackingNumberInfo = res.data.tracking_number_info
          }else{
            if (traceData.trace !== null) {
              this.showTraceAbbreviateData = traceData.traceAbbreviate
              this.showTraceData = traceData.trace
              this.showTraceInfo = false
              this.showTraceLogisticsType = traceData.logistics_type
              this.showTraceTrackingNumberInfo = traceData.tracking_number_info
            }
          }
        })
    },

    toggleItemDetails(){
      this.showTraceInfo = !this.showTraceInfo
    },

  },

}
</script>

<style scoped lang="less">
.wrap {
  padding: 30px 30px;
  .header{
    .search-item{
      margin-bottom: 20px;
      .search-box{
        display: flex;
        justify-content: space-between;
        .hidden-account-options {
          overflow: hidden;
          max-height: 29px;
        }
        .left{

        }
      }
    }
  }
  .page-wrap{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 0px 0 0;
  }
  .table-order{
    p{
      margin: 0;
      padding: 0;
    }
    font-size: 13px;
  }
}
.order-item{
  min-height: 200px;
  width: 100%;
}
.header{
  .el-radio-button__inner{
    padding: 8px 20px;
  }
}
.channel-form{
  &.el-form{
    .el-form-item__label{
      word-break: break-word;
    }
  }
}
.channel-box-card{
  .el-card__header{
    padding: 5px 10px;
    font-size: 12px;
    line-height: 26px;
  }
  .el-card__body{
    padding: 0;
  }
}
.query-select{
  margin-right: 20px;
}
::v-deep .el-dialog__title {
  line-height: 24px;
  font-size: 35px;
  color: #303133;
}
::v-deep .custom-dialog .el-dialog__header .el-dialog__headerbtn {
  display: none;
}
</style>

